<template>
    <div>
        <div>
            <input v-model="inputValue" title="请输入"/>
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item, index) of list" :content="item" :key="index" :index="index" @delete="handleDelete"/>
        </ul>
    </div>
</template>

<script>
    import TodoItem from './components/TodoItem.vue'

    export default {
        name: 'app',
        components: {
            'todo-item': TodoItem
        },
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleClick() {
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleDelete(index) {
                this.list.splice(index, 1);
            }
        }
    }
</script>

<style>

</style>
